<template>
  <el-dialog :close-on-click-modal="false"  v-model="isShow">
    <template #title>
      <div class="card-header">
        <i
            class="el-icon-edit-outline title-icon"
        ></i>
        <span class="title-font">{{title}}</span>
      </div>
      <el-divider></el-divider>
    </template>
    <el-form label-position="right" :rules="rules" ref="dataForm" label-width="80px" :model="dataForm">
      <el-row>
        <el-col :span="12">
          <el-form-item label="真实名称" prop="realName">
            <el-input :readonly="isView" v-model="dataForm.realName" placeholder="真实名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="用户编号"  prop="userCode">
            <el-input :readonly="isView" v-model="dataForm.userCode" placeholder="用户编号" ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="用户名" prop="userName">
            <el-input :readonly="isView" v-model="dataForm.userName" placeholder="用户名"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="密码" prop="password">
            <el-input :readonly="isView" v-model="dataForm.password" type="password" placeholder="密码"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="年龄" prop="age">
            <el-input :readonly="isView" v-model="dataForm.age" placeholder="年龄"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="电话号码" prop="phone">
            <el-input :readonly="isView" v-model="dataForm.phone" placeholder="电话号码"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="部门" prop="deptName">
            <select-dept :disabled="isView" :destroy="isShow" v-model:value="dataForm.deptId"  v-model:name="dataForm.deptName"></select-dept>
          </el-form-item>

        </el-col>
        <el-col :span="12">
          <el-form-item label="邮箱" prop="mail">
            <el-input :readonly="isView" v-model="dataForm.mail" placeholder="邮箱"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item  label="性别" prop="sex">
            <el-radio-group :disabled="isView" v-model="dataForm.sex">
              <el-radio  :label="0">男</el-radio>
              <el-radio  :label="1">女</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否锁定" prop="accountNonLocked">
            <el-radio-group :disabled="isView" v-model="dataForm.accountNonLocked">
              <el-radio :label="0">锁定</el-radio>
              <el-radio :label="1">解锁</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>



    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button v-loading="loading" @click="close">取 消</el-button>
        <el-button v-loading="loading" type="primary" v-if="!isView" @click="save">保 存</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import selectDept from '@/components/dept/select-organization'
import {ageVerify,phoneVerify,mailVerify} from '@/sys/js/verifyForm'
import VueUtil from "@/util/VueUtil";
import {NuoUserController} from "@/actions/controller";

export default {
  name: "user-add-update-form",
  components:{
    selectDept
  },
  emits: ["reload"],
  data(){

    return{
      title:'',
      isView: true,
      loading: false,
      isShow: false,
      dataForm:{
        realName: '',
        userName: '',
        password: '',
        userCode: '',
        age: '',
        phone: '',
        mail: '',
        sex: 0,
        deptId: '',
        deptName: '',
        accountNonLocked: 1,
      },
      rules:{
        realName:[
          { required: true, message: '真实名称不能为空', trigger: 'blur' },
          { min: 1, max: 32, message: '真实名称长度为1 - 32个字符', trigger: 'blur' }
        ],
        userName:[
          { required: true, message: '用户名不能为空', trigger: 'blur' },
          { min: 1, max: 32, message: '用户名长度为1 - 32个字符', trigger: 'blur' }
        ],
        userCode:[
          { min: 1, max: 64, message: '用户编号长度为1 - 64个字符', trigger: 'blur' }
        ],
        password: [
          { min: 1, max: 64, message: '密码长度为1 - 64个字符', trigger: 'blur' }
        ],
        age: [
          { validator: ageVerify, trigger: 'blur' }
        ],
        phone: [
          { validator: phoneVerify, trigger: 'blur'}
        ],
        mail: [
          { validator: mailVerify, trigger: 'blur'}
        ],
        deptName:[
          { required: true, message: '部门名称不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods:{
    init(title,data,isView = false){
      this.title = title
      this.isView = isView
      this.$nextTick(()=>{
        if(this.$refs.dataForm) this.$refs.dataForm.clearValidate()
      })
      if(data){
        Object.assign(this.dataForm,data)
      }
      this.isShow = true
    },
    save(){
      VueUtil(this).formVerify('dataForm',()=>{
        this.loading = true
        VueUtil(this).ajax(NuoUserController.saveUser,this.dataForm).then(res=>{
          VueUtil(this).hint(res.message)
          this.loading = false
          this.$emit("reload")
          this.close()
        }).catch(()=>{
          this.loading = false
        })
      })
    },
    close(){
      Object.assign(this.$data, this.$options.data());
    }
  }
}
</script>

<style scoped>

</style>